<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML >
<html>
<head>
<title>My JSP 'editTable.jsp' starting page</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/common/jquery-1.8.2.min.js"></script>
<jsp:include page="/common/easyui.jsp"></jsp:include>
<body>

<div style="margin:10px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
</div>

<table id="tt" style="width:600px;height:200px"   
        title="Editable DataGrid"   
        singleSelect="true">   
         <thead>   
        <tr>   
            <th field="id" width="100">Item ID</th>   
            <th field="itemname" width="100" editor="text">itemname</th>   
        </tr>
        </thead>
</table>  
</body>
<script type="text/javascript">
$(function(){
	$('#tt').datagrid({    
	    url: '<%=request.getContextPath()%>/user/getItemsPublic.do',
	    onDblClickCell: function(index,field,value){
			$(this).datagrid('beginEdit', index);
				var ed = $(this).datagrid('getEditor', {index:index,field:field});
				$(ed.target).focus();
		},
		 columns:[[    
	        {field:'id',title:'Item ID',width:100},    
	        {field:'itemname',title:'itemname',width:100,editor:'text'},
	        {field:'startdate',title:'startdate',width:100,editor:'datebox'},
	        {field:'enddate',title:'enddate',width:100,editor:'datebox'},
	        {field:'itemduty',title:'itemduty',width:100,editor:'textarea'},
			{field:'action',title:'Action',width:80,align:'center',
				formatter:function(value,row,index){
					if (row.editing){
						var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
						var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
						return s+c;
					} else {
						var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
						var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
						return e+d;
					}
				}
			}
	    ]],
	    onEndEdit:function(index,row){
			$.ajax({
				type:"post",
				url:"<%=request.getContextPath()%>/user/updateItem.do",
				data:row,
				success:function(){
					$("#tt").datagrid('reload');
				}
			});
		},
		onBeforeEdit:function(index,row){
			row.editing = true;
			$(this).datagrid('refreshRow', index);
		},
		onAfterEdit:function(index,row){
			row.editing = false;
			$(this).datagrid('refreshRow', index);
		},
		onCancelEdit:function(index,row){
			row.editing = false;
			$(this).datagrid('refreshRow', index);
		}
	    
	});  
});

	function getRowIndex(target){
		var tr = $(target).closest('tr.datagrid-row');
		return parseInt(tr.attr('datagrid-row-index'));
	}
	function editrow(target){
		$('#tt').datagrid('beginEdit', getRowIndex(target));
	}
	function deleterow(target){
		$.messager.confirm('Confirm','Are you sure?',function(r){
			if (r){
				$('#tt').datagrid('deleteRow', getRowIndex(target));
			}
		});
	}
	function saverow(target){
		$('#tt').datagrid('endEdit', getRowIndex(target));
	}
	function cancelrow(target){
		$('#tt').datagrid('cancelEdit', getRowIndex(target));
	}
	function insert(){
		var row = $('#tt').datagrid('getSelected');
		if (row){
			var index = $('#tt').datagrid('getRowIndex', row);
		} else {
			index = 0;
		}
		$('#tt').datagrid('insertRow', {
			index: index,
			row:{
				status:'P'
			}
		});
		$('#tt').datagrid('selectRow',index);
		$('#tt').datagrid('beginEdit',index);
	}

</script>
</html>
